<template>
    <div class="login">
        <van-dialog
                v-model="show"
                title="登录/注册"
                show-cancel-button
                :before-close="beforeClose"
        >
            <van-cell-group class="cell_grounp">
                <van-field
                        v-model="phone"
                        required
                        class="login_cell"
                        clearable
                        type="number"
                        label="手机号"
                        placeholder="手机号"></van-field>
                <van-field
                        v-model="sms"
                        center
                        class="login_cell "
                        required
                        clearable
                        label="验证码"
                        placeholder="短信验证码">
                    <van-button slot="button" class="van-button_count_down" v-show="show_phone_btn" type="primary"
                                size="small" @click="show_toast">
                        发送验证码
                    </van-button>
                    <van-button slot="button" size="small" type="primary"
                                v-show="!show_phone_btn"
                                :disabled="code < 60"
                                id="TencentCaptcha"
                                data-appid="2076432478"
                                data-cbfn="callback_tx"
                                class="van-button_count_down"
                                :class="{ countdown: code < 60}">
                        {{ code === 60 ? '发送验证码' : code + 's'}}
                    </van-button>
                </van-field>
            </van-cell-group>
        </van-dialog>
    </div>
</template>

<script>
import {
  getCode,
  loginPhone,
  tx_validate,
  get_captcha_init,
  validate_captcha
} from "@/apis/apis";
import { phoneReg } from "@/utils";
import bus from "@/utils/bus";
// import axios from 'axios'
const captchaBox = document.querySelector("#captchaBox");

export default {
  data() {
    return {
      show: false,
      phone: "",
      sms: "",
      code: 60,
      timer: null
    };
  },
  computed: {
    show_phone_btn() {
      return !/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)
    }
  },
  methods: {
    login() {
      this.show = !this.show;
    },
    show_toast() {
      return this.$toast({
        message: "请输入正确的手机号",
        position: "bottom"
      });
    },
    // 登录设置
    beforeClose(action, done) {
      if (action === "confirm") {
        if (!this.phone) {
          return this.$toast({
            message: "手机号不能为空",
            position: "bottom"
          });
        }
        if (!this.sms) {
          return this.$toast({
            message: "验证码不能为空",
            position: "bottom"
          });
        }
        loginPhone({
          code: this.sms
        })
          .then(res => {
            if (res._status === 1007) {
              done(false);
              return this.$toast({
                position: "bottom",
                message: "验证码不正确"
              });
            }
            if (res._status === 0) {
              done();
              setTimeout(() => {
                window.location.reload();
              }, 400);
              return this.$toast({
                position: "bottom",
                message: "登录成功"
              });
            }
            done(false);
            this.$toast({
              position: "bottom",
              message: res._reason
            });
          })
          .catch(() => {
            done(false);
            this.$toast({
              position: "bottom",
              message: "登录失败"
            });
          });
      } else {
        done();
      }
    },
    getCode() {
      if (this.code < 60) {
        return;
      }
      if (!phoneReg.test(this.phone)) {
        return this.$toast("请输入正确的手机号");
      }
      return getCode({ phone: this.phone }).then(res => {
        if (res._status !== 0) {
          return this.$toast({
            position: "bottom",
            message: res._reason
          });
        }
        this.$toast({
          position: "bottom",
          message: "发送验证码成功"
        });
        this.timer = setInterval(() => {
          this.code = this.code - 1;
          if (this.code <= 0) {
            this.code = 60;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      });
    }
  },
  mounted() {
    bus.$on("show_login_dialog", () => {
      this.show = true;
    });
    bus.$on("hide_login_dialog", () => {
      this.show = false;
    });
    this.$nextTick(() => {
      window.callback_tx = res => {
        console.log(res);
        if (res.ticket) {
          tx_validate({
            randstr: res.randstr,
            ticket: res.ticket
          }).then(res => {
            if (res._status === 0 && res.success === true ) {
              this.getCode();
            } else {
              this.$toast({
                position: "bottom",
                message: res._reason
              });
            }
          });
        } else {
          this.$toast({
            position: "bottom",
            message: "请先完成验证"
          });
        }
      };
    });
  }
};
</script>


<style lang="scss">
@import "@/style/var.scss";

.login {
  height: 100%;

  .van-dialog {
      background-image: url('../assets/images/bg-text-pattern-winter.png');
      background-repeat: repeat;

  }

  .van-dialog__header {
    text-align: center;
    padding: 12px 8px;
    color: #ffc107;
    font-size: 28px;
    font-weight: 500;
  }

  .van-button_count_down {
    background-color: $button_background_color;
  }

  .van-dialog__content {
    margin: 0 10px;
    border-radius: 5px;
    overflow: hidden;
  }

  .van-dialog__footer {
    padding-top: 25px;
  }

  .van-button--default {
    color: #fff;
    width: 100px;

    &.van-dialog__cancel {
      background-color: $package_background_color;
      color: $button_background_color;
    }
  }

  .van-dialog__cancel,
  .van-dialog__confirm {
    height: 36px;
    line-height: 36px;
  }
}
</style>
